<template>
  <!-- 有数据页面 -->
  <div id="HaveMoney">
    <div class="HaveMoney-wrapper">
      <div class="list-wrapper" ref="wrapper">
        <ul>
          <li v-for="item in paylist" :key="item.id" ref="month">
            <div :class="{'list-wrapper-active':isActive===item.month}" @click="item.method">{{item.title}}</div>
          </li>
        </ul>
      </div>
      <div class="listconter">
        <transition appear enter-active-class="animated fadeIn" appear-active-class="animated fadeIn">
        <div class="list-box">
          <div class="listconter-wrapper" v-show="isActive===1?true:false" v-for="item of list" :key="item.id">
            <div class="box-wrapper">
              <div class="left">基础工资：</div>
              <div class="right">￥{{item.basesalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">计件薪酬：</div>
              <div class="right">￥{{item.countsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">实发工资：</div>
              <div class="right">￥{{item.totalsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="right">发放日期:{{item.salarytime}}</div>
            </div>
          </div>
          <div class="listconter-wrapper" v-show="isActive===2?true:false" v-for="item of list" :key="item.id">
            <div class="box-wrapper">
              <div class="left">基础工资：</div>
              <div class="right">￥{{item.basesalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">计件薪酬：</div>
              <div class="right">￥{{item.countsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">实发工资：</div>
              <div class="right">￥{{item.totalsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="right">发放日期:{{item.salarytime}}</div>
            </div>
          </div>
          <div class="listconter-wrapper" v-show="isActive===3?true:false" v-for="item of list" :key="item.id">
            <div class="box-wrapper">
              <div class="left">基础工资：</div>
              <div class="right">￥{{item.basesalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">计件薪酬：</div>
              <div class="right">￥{{item.countsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">实发工资：</div>
              <div class="right">￥{{item.totalsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="right">发放日期:{{item.salarytime}}</div>
            </div>
          </div>
          <div class="listconter-wrapper" v-show="isActive===4?true:false" v-for="item of list" :key="item.id">
            <div class="box-wrapper">
              <div class="left">基础工资：</div>
              <div class="right">￥{{item.basesalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">计件薪酬：</div>
              <div class="right">￥{{item.countsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">实发工资：</div>
              <div class="right">￥{{item.totalsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="right">发放日期:{{item.salarytime}}</div>
            </div>
          </div>
          <div class="listconter-wrapper" v-show="isActive===5?true:false" v-for="item of list" :key="item.id">
            <div class="box-wrapper">
              <div class="left">基础工资：</div>
              <div class="right">￥{{item.basesalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">计件薪酬：</div>
              <div class="right">￥{{item.countsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">实发工资：</div>
              <div class="right">￥{{item.totalsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="right">发放日期:{{item.salarytime}}</div>
            </div>
          </div>
          <div class="listconter-wrapper" v-show="isActive===6?true:false" v-for="item of list" :key="item.id">
            <div class="box-wrapper">
              <div class="left">基础工资：</div>
              <div class="right">￥{{item.basesalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">计件薪酬：</div>
              <div class="right">￥{{item.countsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">实发工资：</div>
              <div class="right">￥{{item.totalsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="right">发放日期:{{item.salarytime}}</div>
            </div>
          </div>
          <div class="listconter-wrapper" v-show="isActive===7?true:false" v-for="item of list" :key="item.id">
            <div class="box-wrapper">
              <div class="left">基础工资：</div>
              <div class="right">￥{{item.basesalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">计件薪酬：</div>
              <div class="right">￥{{item.countsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">实发工资：</div>
              <div class="right">￥{{item.totalsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="right">发放日期:{{item.salarytime}}</div>
            </div>
          </div>
          <div class="listconter-wrapper" v-show="isActive===8?true:false" v-for="item of list" :key="item.id">
            <div class="box-wrapper">
              <div class="left">基础工资：</div>
              <div class="right">￥{{item.basesalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">计件薪酬：</div>
              <div class="right">￥{{item.countsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">实发工资：</div>
              <div class="right">￥{{item.totalsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="right">发放日期:{{item.salarytime}}</div>
            </div>
          </div>
          <div class="listconter-wrapper" v-show="isActive===9?true:false" v-for="item of list" :key="item.id">
            <div class="box-wrapper">
              <div class="left">基础工资：</div>
              <div class="right">￥{{item.basesalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">计件薪酬：</div>
              <div class="right">￥{{item.countsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">实发工资：</div>
              <div class="right">￥{{item.totalsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="right">发放日期:{{item.salarytime}}</div>
            </div>
          </div>
          <div class="listconter-wrapper" v-show="isActive===10?true:false" v-for="item of list" :key="item.id">
            <div class="box-wrapper">
              <div class="left">基础工资：</div>
              <div class="right">￥{{item.basesalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">计件薪酬：</div>
              <div class="right">￥{{item.countsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">实发工资：</div>
              <div class="right">￥{{item.totalsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="right">发放日期:{{item.salarytime}}</div>
            </div>
          </div>
          <div class="listconter-wrapper" v-show="isActive===11?true:false" v-for="item of list" :key="item.id">
            <div class="box-wrapper">
              <div class="left">基础工资：</div>
              <div class="right">￥{{item.basesalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">计件薪酬：</div>
              <div class="right">￥{{item.countsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">实发工资：</div>
              <div class="right">￥{{item.totalsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="right">发放日期:{{item.salarytime}}</div>
            </div>
          </div>
          <div class="listconter-wrapper" v-show="isActive===12?true:false" v-for="item of list" :key="item.id">
            <div class="box-wrapper">
              <div class="left">基础工资：</div>
              <div class="right">￥{{item.basesalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">计件薪酬：</div>
              <div class="right">￥{{item.countsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="left">实发工资：</div>
              <div class="right">￥{{item.totalsalary}}</div>
            </div>
            <div class="box-wrapper">
              <div class="right">发放日期:{{item.salarytime}}</div>
            </div>
          </div>
      </div>
      </transition>
    </div>
  </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
  props: {
    list: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      isActive: '',
      paylist: [
        {
          month: 1,
          method: this.getOne,
          title: '1月'
        },
        {
          month: 2,
          method: this.getTwo,
          title: '2月'
        },
        {
          month: 3,
          method: this.getThree,
          title: '3月'
        },
        {
          month: 4,
          method: this.getFour,
          title: '4月'
        },
        {
          month: 5,
          method: this.getFives,
          title: '5月'
        },
        {
          month: 6,
          method: this.getSix,
          title: '6月'
        },
        {
          month: 7,
          method: this.getSeven,
          title: '7月'
        },
        {
          month: 8,
          method: this.getEight,
          title: '8月'
        },
        {
          month: 9,
          method: this.getNine,
          title: '9月'
        },
        {
          month: 10,
          method: this.getTen,
          title: '10月'
        },
        {
          month: 11,
          method: this.getEleven,
          title: '11月'
        },
        {
          month: 12,
          method: this.getTwelve,
          title: '12月'
        }
      ]
    }
  },
  methods: {
    getOne () {
      // 获取数据
      this.isActive = 1
      this.$emit('sendMonth', this.isActive)
    },
    getTwo () {
      // 获取数据
      this.isActive = 2
      this.$emit('sendMonth', this.isActive)
    },
    getThree () {
      // 获取数据
      this.isActive = 3
      this.$emit('sendMonth', this.isActive)
    },
    getFour () {
      // 获取数据
      this.isActive = 4
      this.$emit('sendMonth', this.isActive)
    },
    getFives () {
      // 获取数据
      this.isActive = 5
      this.$emit('sendMonth', this.isActive)
    },
    getSix () {
      // 获取数据
      this.isActive = 6
      this.$emit('sendMonth', this.isActive)
    },
    getSeven () {
      // 获取数据
      this.isActive = 7
      this.$emit('sendMonth', this.isActive)
    },
    getNine () {
      // 获取数据
      this.isActive = 9
      this.$emit('sendMonth', this.isActive)
    },
    getEight () {
      // 获取数据
      this.isActive = 8
      this.$emit('sendMonth', this.isActive)
    },
    getTen () {
      // 获取数据
      this.isActive = 10
      this.$emit('sendMonth', this.isActive)
    },
    getEleven () {
      // 获取数据
      this.isActive = 11
      this.$emit('sendMonth', this.isActive)
    },
    getTwelve () {
      // 获取数据
      this.isActive = 12
      this.$emit('sendMonth', this.isActive)
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        click: true,
        scrollX: true,
        scrollY: false,
        taps: true,
        selectedIndex: true
      })
      this.scroll.scrollToElement(this.$refs.month[this.isActive - 1])
    })
  },
  created () {
    var year = new Date()
    this.isActive = year.getMonth() + 1
  }
}
</script>

<style scoped>
.list-box {
  overflow: auto;
  height: 100%;
}
.list-wrapper-active {
  color: #ff9800;
  border-bottom: 1px solid #ff9800;
}
.listconter {
  background: #fff;
  overflow: hidde;
  position: fixed;
  width: 100%;
  top: 155px;
  bottom: 50px;
}
.listconter-wrapper {
  margin-bottom: 10px;
  border-top: 1px solid #e1e1e1;
  overflow: auto;
  padding: 0 12px;
  font-size: 14px;
  background: #fff;
}
.box-wrapper {
  width: 100%;
  height: 50px;
  line-height: 50px;
  display: flex;
}
.left {
  flex: 1;
  text-align: left;
}
.right {
  flex: 1;
  text-align: right;
}
.list-wrapper {
  width: 100%;
  text-align: center;
  line-height: 40px;
  font-size: 12px;
  border-bottom: 1px solid #e1e1e1;
  padding: 5px 0;
  background: #fff;
}
.list-wrapper ul {
  display: flex;
  width: 200%;
  padding: 2px 0;
}
.list-wrapper ul li div {
  width: 100%;
  font-size: 14px;
  padding: 2px 0;
  text-align: center;
}
.list-wrapper ul li {
  flex: 1;
  border-right: 1px solid #e1e1e1;
  overflow: hidden;
  padding: 0 5px;
}
.list-wrapper ul li:nth-of-type(12) {
  flex: 1;
  border-right: none;
  overflow: hidden;
  padding: 0 5px;
}
#HaveMoney {
  position: fixed;
  top: 87px;
  bottom: 50px;
  width: 100%;
  overflow: hidden;
}
.HaveMoney-wrapper {
  overflow: hidden;
  z-index: 0;
}
.yd-tab-panel-item {
  top: -44px;
  overflow: hidden;
}
.HaveMoney-content {
  height: 80%;
  background-color: #fff;
  box-sizing: content-box;
  margin: 0.78rem 0 0 0;
  position: relative;
}
.date {
  bottom: 0.2rem;
  right: 0.22rem;
  font-size: 0.22rem;
  position: absolute;
  right: 4;
  bottom: 0;
  line-height: 50px;
}
</style>
